<template>
	<view class="banner-box">
		<view class="banner-bg" :style="{'background-image': `linear-gradient(${bannerBackgroud || '#345DC2'} 50%, #FFF)`}"></view>
		<!-- 轮播图组件
		indicator-dots	是否显示面板指示点
		autoplay 是否自动切换
		interval 自动切换时间间隔
		-->
		<swiper class="banner-swipper" indicator-dots	indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#FFFFFF"
			autoplay :interval="4000" :current="current" @change="swiperChange"
		>
			<swiper-item class="swiper-item" v-for="(item, index) in bannerList" :key="index">
				<image @click="navTo(item.advertUrl)" :src="item.imageUrl"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {

		props: {
			bannerList: {
				type: Array,  
				
				default: () => [
					{
						id: 1,                           
						imageUrl: '/static/images/banner1.jpg', 
						background: '#45328C',           
						advertUrl: '/pages/course/course-details' 
					},
					{
						id: 2,                           
						imageUrl: '/static/images/banner2.jpg',
						background: '#006C00',           
						advertUrl: '/pages/course/course-details' 
					},
					{
						id: 3,                           
						imageUrl: '/static/images/banner3.jpg', 
						background: '#0072B7',           
						advertUrl: '/pages/course/course-details'
					}
				]
			}
		},

		data() {
			return {
				current: 0,         
				bannerBackgroud: ''
			}
		},

		methods: {
			swiperChange(e) {
				// console.log('e', e.detail.current)
				this.current = e.detail.current
				this.bannerBackgroud = this.bannerList[this.current].background
				// console.log('bannerBackgroud', this.bannerBackgroud)
			}
		},

		watch: {
			bannerList: {
				handler(newVal) {
					// 如果新值存在且长度大于0
					if(newVal && newVal.length > 0 ) {
						// 获取第1个元素中的背景色，然后设置
						this.current = 0
						// 设置第1张图背景色
						this.bannerBackgroud =
							this.bannerList[0] && this.bannerList[0].background
					}
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss">
	/* 轮播图容器样式 */
	.banner-box {
		padding-top: 120rpx;  // 上内边距
		/* #ifdef APP-PLUS*/
		// APP端额外考虑状态栏高度
		padding-top: calc(var(--status-bar-height) + 120rpx);
		/* #endif*/

		/* 背景渐变区域样式 */
		.banner-bg {
			position: absolute;   // 绝对定位
			top: 0;               // 距离顶部
			width: 100%;          // 宽度
			height: 470rpx;       // 高度
			/* #ifdef APP-PLUS*/
			// APP端额外考虑状态栏高度
			height: calc(var(--status-bar-height) + 470rpx);
			/* #endif*/
			// background-image: linear-gradient(red 50%, #FFF);
			// 过渡效果
			transform: .5s;       // 变换动画
		}

		/* 轮播图组件样式 */
		.banner-swipper{
			width: 100%;          // 宽度
			height: 350rpx;       // 高度

			/* 轮播图项样式 */
			.swiper-item {
				width: 100%;      // 宽度
				height: 100%;     // 高度
				padding: 0 30rpx; // 水平内边距

				/* 轮播图图片样式 */
				image {
					width: 100%;           // 宽度
					height: 100%;          // 高度
					border-radius: 15rpx;  // 圆角
				}
			}
		}
	}
</style>
